import React, { memo, useEffect, useState } from 'react'
import { HeaderRighWrapper } from './style'
import IconGlobal from '@/assets/svg/icon_global'
import IconMenu from '@/assets/svg/icon_menu'
import IconAvatar from '@/assets/svg/icon_avatar'

const HeaderRigh = memo(() => {
  // 给弹出页定义状态
  const [showPanel, setShowPanel] = useState(false)

  // 监听window点击隐藏，使用useEffect不重复渲染
  function windowClickHandle(){
    setShowPanel(false)
  }
  useEffect(() => {
    // 使用事件捕获，不向上冒泡，不然点击弹出页也会冒泡到window窗口，再次设置为false隐藏
    window.addEventListener('click',windowClickHandle,true)
    // 移除window监听事件
    return window.removeEventListener('click',windowClickHandle)
  // 使用空数组不依赖某个数据，只渲染一次
  },[])

  // 点击显示弹出页
  function profileClickHandle(){
    setShowPanel(true)
  } 
  
  return (
    <HeaderRighWrapper>
      <div className='btns'>
        <span className="btn">登录</span>
        <span className="btn">注册</span>
        <span className="btn">
          <IconGlobal/>
        </span>
        <div className="profile" onClick={profileClickHandle}>
          <div className='inner-conter'>
            <span><IconMenu/></span>
            <span><IconAvatar/></span>
          </div>
          {/* 对弹出页做点击隐藏 */}
          {
            showPanel&&(
              <div className="panel">
                <div className="top">
                  <div className='item regis'>注册</div>
                  <div className='item login'>登录</div>
                </div>
                <div className="bot">
                  <div className="item">出租房源</div>
                  <div className="item">开展体验</div>
                  <div className="item">帮助</div>
                </div>
              </div>
            )
          }
        </div>
      </div>
    </HeaderRighWrapper>
  )
})

export default HeaderRigh